<template>
	<movable-area>
		<movable-view direction="all" out-of-bounds inertia x="20" y="600">
			<button open-type='contact' 
			send-message-path="/pages/home/home"
			bindcontact="bindcontact"
			show-message-card="true"
			send-message-title="商品名字"
			send-message-img="https://tejia.huizukeji.cn/pos/mappingImg/materialImg/jrtj/20200723113922395415657.jpg"
			 type="default" class="gui-button style-btn"><text class="gui-block-text pendant animateInfinite bounce ali-icon color-icon">&#xe674;</text></button>
		</movable-view>
	</movable-area>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
		
		}
	}
</script>

<style lang="scss" scoped>
	/* 引入动画库 */
	@import "@/GraceUI5/css/animate.css";

	.animateInfinite {
		animation-duration: 3s;
		animation-timing-function: linear;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}
	
	.style-btn{
		background: transparent;
		overflow: inherit;
	}
	
	.color-icon{
		color:#5f96f5 ;
	}

	movable-area {
		width: 100vw;
		height: 90vh;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
	}
	
	movable-view {
		pointer-events: auto;
		width: 100rpx;
		height: 100rpx;
		background: rgb(233, 244, 255);
		color: rgb(95, 150, 245);
		position: fixed;
		z-index: 555;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	
	}
</style>
